<template>
  <div class="app-container">
    <el-form
    class="searchForm" :inline="true" size="mini"
      ref="searchForm"
      :model="searchForm" label-width="80px"
    >
      <el-form-item label="厂商名称">
        <el-input v-model="searchForm.name" clearable placeholder="请输入厂商名称" />
      </el-form-item>
      <el-form-item label="厂商编码">
        <el-input v-model="searchForm.code" clearable placeholder="请输入厂商编码" />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          size="mini"
          icon="el-icon-search"
          @click="doSearch"
          >搜索</el-button
        >
        <el-button
          type="default"
          size="mini"
          icon="el-icon-refresh"
          @click="resetSearch"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
    <div class="searchs-content" v-permission="['equip:manufactor:insert']">
      <el-button
        type="primary"
        size="mini"
        plain
        icon="el-icon-plus"
        @click="addDialog"
        >新增</el-button
      >
    </div>
    <Table
      :tableHeader="tableHeader"
      :tableData="tableData"
      :tableLoading="listLoading"
    >
      <template slot="action" slot-scope="scope">
        <el-button
          type="primary"
          size="mini"
          @click="addDialog(scope.row)"
          v-permission="['equip:manufactor:update']"
          >编辑</el-button
        >
      </template>
    </Table>
    <pagination
      v-if="total > 0"
      :total="total"
      :page.sync="searchForm.pageNum"
      :limit.sync="searchForm.pageSize"
      @pagination="fetchData"
    />

    <!-- 弹框 -->
    <Dialog
      class="detailDialog"
      :visible="visible"
      width="30%"
      :loading="dialogBtnLoading"
      :title="dialogTitle"
      @confirmDialog="confirmDialog"
      @cancelDialog="cancelDialog"
    >
      <el-form
        ref="dialogForm"
        :model="dialogForm"
        label-width="80px"
        :rules="dialogRules" size="small"
      >
        <el-form-item label="厂商名称" prop="name">
          <el-input v-model="dialogForm.name" clearable placeholder="请输入厂商名称" />
        </el-form-item>
        <el-form-item label="厂商编码" prop="code">
          <el-input
            v-model="dialogForm.code"
            :disabled="dialogForm.id ? true : false" clearable
            placeholder="请输入厂商编码"
          />
        </el-form-item>
        <el-form-item label="负责人" prop="leader">
          <el-input v-model="dialogForm.leader" clearable placeholder="请输入负责人" />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="dialogForm.email" clearable placeholder="请输入厂商邮箱" />
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input
            v-model="dialogForm.phone" clearable
            placeholder="请输入厂商联系电话"
          />
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            type="textarea"
            rows="6"
            v-model="dialogForm.remark"
            placeholder="请输入备注"
          />
        </el-form-item>
      </el-form>
    </Dialog>
  </div>
</template>

<script>
import { factuerManage } from "@/api/factuer";
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
import Table from "@/components/Table";
import Dialog from "@/components/Dialog";

import moment from "moment";
import { handleConfirm } from "@/utils/messageBox";
import { removeNullUndefined } from "@/utils/index.js";

export default {
  components: { Pagination, Table, Dialog },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "gray",
        deleted: "danger",
      };
      return statusMap[status];
    },
  },
  data() {
    return {
      listLoading: true,
      total: 0,
      searchForm: {
        pageNum: 1,
        pageSize: 15,
        name: "",
        code: "",
      },

      tableHeader: [
        {
          type: "index",
          label: "序号",
          width: "60",
          fixed: true,
        },
        {
          label: "厂商名称",
          prop: "name",
        },
        {
          label: "厂商编码",
          prop: "code",
        },
        {
          label: "操作人",
          prop: "leader",
        },

        {
          label: "更新时间",
          prop: "updateTime",
          formatter: (item) => {
            return item.updateTime
              ? moment(item.updateTime).format("YYYY-MM-DD HH:mm:ss")
              : "";
          },
        },
        { slot: "action", label: "操作", width: "120" },
      ],
      tableData: [],
      visible: false, //弹框标识
      dialogForm: {
        name: "",
        code: "",
        leader: "",
        email: "",
        phone: "",
        remark: "",
      },
      dialogRules: {
        name: [{ required: true, message: "请输入厂商名称", trigger: "blur" }],
        leader: [
          { required: true, message: "请输入厂商负责人", trigger: "blur" },
        ],
        email: [{ required: true, message: "请输入厂商邮箱", trigger: "blur" }],
        code: [
          { required: true, message: "请输入厂商编码", trigger: "blur" },
          // {
          //   min: 3,
          //   max: 10,
          //   message: "厂商编码长度为3到10个字符",
          //   trigger: "blur",
          // },
        ],
        phone: [
          { required: true, message: "请输入厂商联系电话", trigger: "blur" },
          {
            min: 11,
            max: 11,
            message: "请输入11位正确的手机号",
            trigger: "blur",
          },
        ],
      },
      dialogTitle: "",
      dialogBtnLoading: false,
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData(val) {
      this.searchForm.pageNum = val ? val.page : this.searchForm.pageNum;
      this.listLoading = true;
      factuerManage("/list", "get", {
        ...removeNullUndefined(this.searchForm),
      })
        .then((response) => {
          this.tableData = response.data;
          this.total = +response.total;
        })
        .finally(() => {
          this.listLoading = false;
        });
    },
    // 弹框取消
    cancelDialog() {
      this.visible = false;
      this.resetDialogForm("dialogForm");
    },
    // 弹框确认
    confirmDialog() {
      this.submitDialogForm("dialogForm");
    },
    // 新增
    addDialog(row) {
      this.visible = true;
      if (row.id) {
        this.dialogTitle = "编辑";
        this.dialogForm = { ...row };
      } else {
        this.dialogTitle = "新增";
        this.dialogForm = {
          name: "",
          code: "",
          leader: "",
          email: "",
          phone: "",
          remark: "",
        };
      }
    },
    submitDialogForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let msg = this.dialogForm.id ? "编辑" : "新增";
          handleConfirm(`确定要${msg}厂商信息吗？`, "warning", "提示")
            .then((res) => {
              this.doAdd();
            })
            .catch((err) => {
              // do something cancel
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetDialogForm(formName) {
      this.$refs[formName].resetFields();
    },
    doAdd() {
      this.dialogBtnLoading = true;

      let url = this.dialogForm.id ? "/update" : "/insert";
      let { id, name, email, leader, phone, remark } = this.dialogForm;
      let param = this.dialogForm.id
        ? { id, name, email, leader, phone, remark }
        : this.dialogForm;
      factuerManage(url, "post", param, 1)
        .then((res) => {
          if (res.code == 200) {
            this.$message.success(
              this.dialogForm.id
                ? res.message
                : "新增成功，请到人员管理中添加厂商管理员"
            );
            this.visible = false;
            this.fetchData();
          }
        })
        .finally(() => {
          this.dialogBtnLoading = false;
        });
    },
    resetSearch() {
      this.searchForm = {
        pageNum: this.searchForm.pageNum,
        pageSize: this.searchForm.pageSize,
        name: "",
        code: "",
      };
    },
    doSearch() {
      this.searchForm.pageNum = 1;
      this.fetchData();
    },
  },
};
</script>
<style scoped lang="scss">
.searchForm {
    .el-form-item {
        margin-bottom: 8px;
    }
}
.detailDialog {
  ::v-deep .el-dialog__body {
    padding-bottom: 0;
  }
  ::v-deep .el-dialog__footer {
    padding-top: 0;
  }
  .el-form-item {
    margin-bottom: 18px;
  }
  ::v-deep .el-input.is-disabled .el-input__inner {
  color: #000000;
}
}
</style>
